﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Easyui扩展库 Datagrid编辑 - 落阳 整理</title>
    <link href="http://www.easyui-extlib.com/Content/Site.css" rel="stylesheet" />
    <script src="http://www.easyui-extlib.com/Scripts/jquery/jquery-1.11.0.min.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-extensions/jquery.jdirk.js"></script>
    <link href="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/themes/default/easyui.css" rel="stylesheet" />
    <link href="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/themes/icon.css" rel="stylesheet" />
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

    <link href="http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/datagrid/jeasyui.extensions.datagrid.css" rel="stylesheet" />
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/datagrid/jeasyui.extensions.datagrid.editors.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/datagrid/jeasyui.extensions.datagrid.extEdit.js"></script>
    <script>
        $(function () {

            var dg = $("#dgBuyItemList"),
                defaultRow = { ID: "", Name: "外星人笔记本", ApplyCount: 1, IsEmergency: 'true', Remark: "给我来高配" },
                insertPosition = "bottom";

            var dgInit = function () {

                var getColumns = function () {
                    var result = [];

                    var normal = [
                        { field: "ck", checkbox: true },
                        {
                            field: 'Name', title: '物资名称', width: 180,
                            editor: {
                                type: "validatebox",
                                options: {
                                    required: true
                                }
                            }
                        },
                        {
                            field: 'ApplyCount', title: '申请数量', width: 100,
                            editor: {
                                type: "numberbox",
                                options: {
                                    required: true
                                }
                            }
                        },
                        {
                            field: 'IsEmergency', title: '是否加急', width: 100,
                            editor: {
                                type: "checkbox",
                                options: {
                                    on: "true",
                                    off: "false"
                                }
                            },
                            formatter: function (val) { return val == "true" ? "是" : "否"; }
                        },
                        {
                            field: 'Remark', title: '备注', width: 100,
                            editor: {
                                type: "text"
                            }
                        }
                    ];
                    result.push(normal);

                    return result;
                };
                var options = {
                    idField: "ID",
                    rownumbers: true,
                    fitColumns: true,
                    fit: true,
                    border: false,
                    singleSelect: true,
                    columns: getColumns(),
                    extEditing: true, //开启 extEdit 效果
                    singleEditing: true, //开启 单行编辑 限制
                    autoFocusField: true, //开启自动聚焦第一列的编辑器
                    onDblClickRow: function (index, row) {
                        dg.datagrid("beginEdit", index);
                    }
                };

                dg.datagrid(options);

            };

            var getInsertRowIndex = function () {
                return insertPosition == "top" ? 0 : dg.datagrid("getRows").length;
            }

            var buttonBindEvent = function () {

                $("#btnInsert").click(function () {
                    var targetIndex = getInsertRowIndex(), targetRow = $.extend({}, defaultRow, { ID: $.util.guid() });
                    dg.datagrid("insertRow", { index: targetIndex, row: targetRow });
                    dg.datagrid("beginEdit", targetIndex);
                });
            };


            dgInit(); buttonBindEvent();


        });
    </script>
</head>
<body>
    <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'north',border:false" style="height:40px;overflow:hidden;">
            <div class="datagrid-toolbar" style="height:100%;padding:7px;">
                <a id="btnInsert" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">新增一行</a>
            </div>
        </div>
        <div data-options="region:'center',border:false">
            <div class="easyui-layout" data-options="fit:true">
                <div data-options="region:'north',border:false" style="height:160px;padding:20px;overflow:hidden;">
                    <div style="font-size:22px;font-weight:bolder;width:100%;text-align:center;">
                        本demo演示仿 ext-grid-rowediting 行编辑的“保存”和“取消”按钮面板，以及 <br />
                        singleEditing、autoFocusField 扩展属性的功能。
                    </div>
                    <form id="PurchaseApplyForm" method="post">
                        <table border="0" style="width:100%;height:auto;margin-top:15px;padding:10px;">
                            <tr>
                                <td style="width:110px;text-align:right;">申请人：</td>
                                <td>
                                    <input id="ApplyStaff" name="ApplyStaff" type="hidden" value="ly001" />
                                    <input class="easyui-textbox" id="ApplyStaffName" name="ApplyStaffName" data-options="readonly:true" value="落阳" style="width:120px">
                                </td>
                                <td style="width: 110px; text-align: right;">编号：</td>
                                <td>
                                    <input class="easyui-textbox" id="ApplyID" name="ApplyID" value="" data-options="readonly:true" style="width:220px">
                                </td>
                            </tr>
                            <tr>
                                <td style="width:110px;text-align:right;">申请部门：</td>
                                <td>
                                    <input id="ApplyDepartment" name="ApplyDepartment" type="hidden" value="scb001" />
                                    <input class="easyui-textbox" id="ApplyDepartmentName" name="ApplyDepartmentName" data-options="readonly:true" value="市场部" style="width:120px">
                                </td>
                                <td style="width:110px;text-align:right;">日期：</td>
                                <td>
                                    <input class="easyui-textbox" id="ApplyDate" name="ApplyDate" data-options="readonly:true" value="2015-11-15" style="width:120px">
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
                <div data-options="region:'center',border:false" style="border-top-width:1px;">
                    <table id="dgBuyItemList"></table>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
